<template>
    <div class="app-container">
<!--      搜索栏  -->
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
            <el-form-item label="项目代码" prop="projectCode">
                <el-input v-model="queryParams.projectCode"
                        placeholder="请输入项目代码" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="项目名称" prop="projectName">
                <el-input v-model="queryParams.projectName"
                        placeholder="请输入项目名称" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="题库名称" prop="questionBankName">
                <el-input v-model="queryParams.questionBankName"
                        placeholder="请输入题库名称" clearable size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>

            <el-form-item label="题库类型" prop="questionBankType">
                <el-select v-model="queryParams.questionBankType" placeholder="题库类型" @clear="clearQuestionBankType" clearable size="small">
                    <el-option v-for="dict in questionBankTypeOptions"
                            :key="dict.code"
                            :label="dict.name"
                            :value="dict.code"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="创建日期">
                <el-date-picker v-model="dateRange" size="small"
                        style="width: 240px" value-format="yyyy-MM-dd"
                        type="daterange" range-separator="-"
                        start-placeholder="开始日期" end-placeholder="结束日期"
                ></el-date-picker>
            </el-form-item>
            <el-form-item style="margin-left: 10px;">
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" style="margin-left: 10px;">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddArmy">新增</el-button>
            </el-col>
            <!--<el-col :span="1.5">
                <el-button type="success" icon="el-icon-edit" size="mini" :disabled="single" @click="handleEdit">编辑</el-button>
            </el-col>-->
            <!--<el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除</el-button>
            </el-col>-->
            <el-col :span="1.5">
                <el-button type="info" icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" icon="el-icon-download" size="mini" @click="handleExport">导出</el-button>
            </el-col>
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :data="questionBankList" @selection-change="handleSelectionChange">
<!--            <el-table-column type="selection" width="45" align="center"/>-->
            <el-table-column label="序号" align="center" type="index" :show-overflow-tooltip="false" width="55"/>
            <el-table-column label="题库类型" align="center" prop="questionBankType" width="80" :formatter="questionBankTypeFormat"/>
            <el-table-column label="项目代码" align="center" prop="projectCode"/>
            <el-table-column label="项目名称" align="center" prop="projectName"/>
            <el-table-column label="题库名称" align="center" prop="questionBankName"/>
            <el-table-column label="所属部门" align="center" prop="deptName"/>
            <el-table-column label="创建日期" align="center" prop="creationDate" width="100">
                <template slot-scope="scope">
                    <span>{{ parseTime(scope.row.creationDate, '{y}-{m}-{d}') }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding" width="200">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" icon="el-icon-edit"
                            @click="handleEdit(scope.row)"
                    >修改</el-button>
                    <el-button size="mini" type="text" icon="el-icon-setting"
                            @click="handleRuleSetting(scope.row)"
                    >规则设置</el-button>
                    <el-button size="mini" type="text" icon="el-icon-delete"
                            @click="handleDelete(scope.row)"
                    >删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
                v-show="total>0"
                :total="total"
                :page.sync="pageParams.page"
                :limit.sync="pageParams.rows"
                @pagination="getList"
        />
        <!-- 添加或修改题库信息 -->
        <el-dialog :title="title" :visible.sync="open" v-if="open" width="650px" append-to-body>
            <question-bank-form :form="form" :questionBankTypeOptions="questionBankTypeOptions" @submitForm="getList" @cancelDialog="cancel"></question-bank-form>
        </el-dialog>
        <!-- 题库规则 -->
        <el-dialog :title="title" :visible.sync="bankRuleOpen" v-if="bankRuleOpen" width="650px" append-to-body>
            <blanket-rule-form v-if=" '0' === ruleTag" :bankRuleForm="bankRuleForm" @submitForm="getList" @cancelDialog="cancel"></blanket-rule-form>
            <skill-rule-form v-if=" '1' === ruleTag" :bankRuleForm="bankRuleForm" @submitForm="getList" @cancelDialog="cancel"></skill-rule-form>
            <craft-rule-form v-if=" '2' === ruleTag" :bankRuleForm="bankRuleForm" @submitForm="getList" @cancelDialog="cancel"></craft-rule-form>
        </el-dialog>
        <!-- 题库导入对话框 -->
        <el-dialog :title="uploadTitle" :visible.sync="uploadOpen" width="400px" append-to-body>
            <ExcelImport :uploadUrl="uploadUrl" @importTemplate="importTemplateCallback" @submitBtnSuccess="getList" @cancelDialog="handleImportCancle"/>
        </el-dialog>
    </div>
</template>

<script>
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import {
        delQuestionBank,
        exportQuestionBank,
        getQuestionBankById,
        getQuestionBankRuleById,
        importTemplate,
        listQuestionBank,
    } from "@/api/question/questionBank";
    import questionBankForm from "./form/questionBankForm";
    import blanketRuleForm from "./form/blanketRuleForm";
    import skillRuleForm from "./form/skillRuleForm";
    import craftRuleForm from "./form/craftRuleForm";
    import ExcelImport from "@/components/tools/ExcelImport";

    export default {
        name: "questionBank",
        components: {
            questionBankForm,
            blanketRuleForm,
            skillRuleForm,
            craftRuleForm,
            ExcelImport
        },
        data() {
            return {
                // 按钮loading
                buttonLoading: false,
                // 遮罩层
                loading: true,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 题库表格数据
                questionBankList: [],
                // 弹出层标题
                title: "",
                // 是否弹出层
                open: false,
                // 题库规则弹出层
                bankRuleOpen: false,
                // 题库规则标识
                ruleTag: "",
                // 题库类型数据字典
                questionBankTypeOptions: [],
                // 日期范围
                dateRange: [],
                uploadUrl: "/api/uf/boostor/exam/question/ExamBankRest/importData/v1",
                uploadOpen: false,
                uploadTitle: '',
                // 分页参数
                pageParams: {
                    page: 1,
                    rows: 10,
                },
                // 查询参数
                queryParams: {
                    projectCode: undefined,
                    projectName: undefined,
                    questionBankName: undefined,
                    questionBankType: undefined
                },
                // 表单参数
                form: {},
                //  规则表单参数
                bankRuleForm: {
                    questionBankId: '',
                    questionBankName: '',
                    questionBankType: '',
                    // 规则
                    bankRuleList: [],
                }
            };
        },
        created() {
            this.getList();
            //查询 题库类别字典状态
            this.getDicts("exam_bank_type").then(response => {
                this.questionBankTypeOptions = response.responseBody.result;
            });
        },
        methods: {
            /** 查询题库列表 */
            getList() {
                this.loading = true;
                listQuestionBank(
                    {
                        'pageParameter': this.pageParams,
                        'searchParams': this.addDateRange(this.queryParams, this.dateRange)
                    }
                ).then(response => {
                    this.questionBankList = response.responseBody.result;
                    this.total = response.responseBody.pageParameter.totalCount;
                    this.loading = false;
                });
            },

            // 题库类型字典翻译
            questionBankTypeFormat(row, column) {
                return this.selectDictLabel(this.questionBankTypeOptions, row.questionBankType);
            },

            // 取消按钮
            cancel() {
                this.reset();
                this.open = false;
                this.bankRuleOpen = false;
            },

            // 表单重置
            reset() {
                // 题库
                this.form = {
                    projectCode: undefined,
                    projectName: undefined,
                    questionBankName: undefined,
                    questionBankType: undefined,
                    theoryQualified: undefined,
                    practicalQualified: undefined,
                    theoryTotal: undefined,
                    theoryDuration: undefined,
                };
                //题库规则
                this.bankRuleForm = {
                    questionBankId: '',
                    questionBankName: '',
                    questionBankType: '',
                    // 规则
                    bankRuleList: [],
                };
                this.dateRange = [];
                this.resetForm("form");
            },
            /** 清空搜索题库类型参数为 undefined */
            clearQuestionBankType(val) {
                this.queryParams.questionBankType = undefined;
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.pageParams.page = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.reset();
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.questionBankId)
                this.single = selection.length != 1
                this.multiple = !selection.length
            },

            /** 新增题库按钮操作 */
            handleAddArmy() {
                this.reset();
                this.open = true;
                this.form = {
                    questionBankType: '0', // 默认选择通用类型题库
                }
                this.title = "新增题库";
            },

            /** 题库编辑按钮操作 */
            handleEdit(row) {
                this.reset();
                const ids = row.questionBankId || this.ids
                getQuestionBankById(ids).then(response => {
                    this.form = response.responseBody;
                    // 转换技能鉴定组别题库为数组，便于回显
                    if (this.form.questionBankType === '1') {
                        this.form.skillGroups = this.form.skillGroup.split(',');
                    }
                    this.open = true;
                    this.title = "修改题库";
                });
            },

            /** 题库规则设置按钮 */
            handleRuleSetting(row) {
                this.ruleTag = row.questionBankType;
                //  获取该题库所有试题类别
                getQuestionBankRuleById(row.questionBankId).then(response => {
                    this.bankRuleForm.projectName = row.projectName;
                    this.bankRuleForm.questionBankId = row.questionBankId;
                    this.bankRuleForm.questionBankName = row.questionBankName;
                    this.bankRuleForm.questionBankType = row.questionBankType;
                    // 技能鉴定则展示专业组和等级
                    if (this.bankRuleForm.questionBankType === '1') {
                        this.bankRuleForm.skillGroup = row.skillGroup;
                        this.bankRuleForm.skillGrade = row.skillGrade;

                    }
                    this.bankRuleForm.theoryTotal = row.theoryTotal;
                    this.bankRuleForm.bankRuleList = response.responseBody;
                    if (response.responseBody !== null) {
                        this.bankRuleOpen = true;
                    }
                    this.title = "题库规则";
                })
            },

            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.questionBankId || this.ids;
                this.$confirm('确认删除该题库的数据项？', "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    this.loading = true;
                    delQuestionBank(ids).then(response => {
                        this.loading = false;
                        if (response.retCode === '200') {
                            if (response.responseBody === 0) {
                                this.$alert(response.message, '提示');
                                return;
                            }
                            this.getList();
                            this.msgSuccess("删除成功");
                        }
                    })
                }).catch((err) => {
                }).finally(() => {
                    this.loading = false;
                });
            },

            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$confirm('确认导出所有题库数据项?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(() => {
                    exportQuestionBank({searchParams: queryParams}).then(response => {
                        this.download(response.responseBody);
                    })
                }).catch(() => {
                })
            },
            /** 导入按钮操作 */
            handleImport() {
                this.uploadTitle = "题库导入";
                this.uploadOpen = true;
            },
            handleImportCancle() {
                this.uploadOpen = false;
            },
            importTemplateCallback(callback) {
                importTemplate().then(response => {
                    callback(response.responseBody)
                })
            }
        }
    };
</script>
